<%@ include file="/WEB-INF/views/include.jsp"%>
<%@ page session="false"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui/jquery.ui.core.css"/>" />
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui/jquery.ui.datepicker.css"/>" />
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui/jquery.ui.theme.css"/>" />
	<link rel="stylesheet" type="text/css" href="<c:url value="/ckeditor/_samples/sample.css"/>" />
	
	<script src="<c:url value="/ckeditor/ckeditor.js"/>"	type="text/javascript"></script>
	<script src="<c:url value="/ckeditor/_samples/sample.js"/>"	type="text/javascript"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Create Content</title>
</head>
<body>
<div id="content" class="">
	<form>
		<c:url var="getUrl" value="/bo/content/get-contenttype">
		</c:url>
		<c:url var="urlContent" value="/bo/content/create-content">
		</c:url>
		<fieldset id="info">
			<legend>CONTENT INFORMATION</legend>
			<div class="clearfix">
				<label for="nameContent">Name Content</label>
				<div class="input">
					<input type="text" size="30" name="nameContent"	id="nameContent" class="xlarge">
				</div>
			</div>
		</fieldset>
		<fieldset id="element">
			<div class="clearfix">
	            	<label for="mediumSelect">Content Type</label>
		            <div class="input">
		              <select id="mediumSelect" name="mediumSelect" class="medium" onchange="selectContentType('${getUrl}',this.options[selectedIndex].value)">
		              	  <option value="-1">---Select---</option>
			              <c:forEach items="${contenttypes}" var="contenttype">
			                	<option value="${contenttype.id}">${contenttype.name}</option>
						  </c:forEach>
		              </select>
		            </div>
	         	</div>
		</fieldset>
		<fieldset id="showElementContentType">
		</fieldset>
		<div align="center" style="padding: 14px 19px;" class="well">
			<input id="button1" type="button" class="btn primary" onclick="addContent('${urlContent}')" value="submit" /> 
			<input id="button2" type="button" value="Cancel" class="btn success" />
		</div>
	</form>
</div>

<script type="text/javascript">

		jQuery(document).ready(function(){
			jQuery("#mediumSelect option[value=-1]").attr('selected', 'selected');
		})

		function selectContentType(getUrl, idContentType){
			jQuery("#content #showElementContentType").removeClass();
			jQuery("#content #showElementContentType .clearfix").remove();
			if(idContentType != "-1"){
				jQuery.ajax({
					url: getUrl,
					data: "id=" + idContentType,
					context: document.body,
					success: function(contentType){
						if(contentType.data.length > 0){
							var dataElementEdit = jQuery.parseJSON(contentType.data);
							var htmlRender ="";
							for(var i = 0; i < dataElementEdit.length ; i++){
								code = dataElementEdit[i].code;		
								name = dataElementEdit[i].name;
								type = dataElementEdit[i].type;
								//alert("Type >> " + type + "  ---value>>" + getFieldHtml(name,code,type));
								jQuery("#content #showElementContentType").append(getFieldHtml(name,code,type));
								if(type == "Rich Text"){
									createEditor(code);
								}
							}
							jQuery("#content #showElementContentType").addClass("well")
							jQuery("#datepicker").datepicker({
								changeMonth: true,
								changeYear: true
							});
						}
					}	
				})
			}
		}

		function getFieldHtml(name,code,type){
			var html = "";
			if(type == "Text Field"){
				html = '<div class="clearfix">' +
		            		'<label for="xlInput">' + name + '</label>' +
		            		'<div class="input">' +
		              			'<input type="text" size="30" name="' + code + '" id="' + code + '" class="xlarge">' +
		             		'</div>' +
	         			'</div>';
			}
			if(type == "Text Area"){
				html = '<div class="clearfix">' +
	            			'<label for="textarea">' + name + '</label>' +
	            			'<div class="input">' +
				              '<textarea rows="3" name="' + code + '" id="' + code + '" class="xxlarge"></textarea>' +
				              '<span class="help-block">' +
				                	'Block of help text to describe the field above if need be.' +
				              '</span>' +
	            		    '</div>' +
         			   '</div>';
			}
			if(type == "Rich Text"){
				html = '<div class="clearfix">' +
	            			'<label for="textarea">' + name + '</label>' +
	            			'<div class="input">' +
				              '<div id="' + code + '"></div>' +
				              '<span class="help-block">' +
				                	'Block of help text to describe the field above if need be.' +
				              '</span>' +
	            		    '</div>' +
         			   '</div>';
			}
			if(type == "Numerical"){
				html = '<div class="clearfix">' +
        			   '</div>';
			}
			if(type == "Email Address"){
				html = '<div class="clearfix">' +
		            	'<label for="prependedInput">' + name + '</label>' +
	    				'<div class="input">' +
		             		 '<div class="input-prepend">' +
		                		'<span class="add-on">@</span>' +
		                		'<input type="text" size="16" name="' + code + '" id="' + code + '" class="medium">' +
		               		 '</div>' +
		           		   '</div>' +
        			   '</div>';
			}
			if(type == "Web Address"){
				html = '<div class="clearfix">' +
		            	'<label for="prependedInput">' + name + '</label>' +
	    				'<div class="input">' +
		             		 '<div class="input-prepend">' +
		                		'<span class="add-on">www</span>' +
		                		'<input type="text" size="16" name="' + code + '" id="' + code + '" class="medium">' +
		               		 '</div>' +
		           		   '</div>' +
        			   '</div>';
			}
			if(type == "File"){
				html = '<div class="clearfix">' +
		            	'<label for="fileInput">' + name + '</label>' +
	    				   '<div class="input">' +
	    						'<input type="file" name="' +code + '" id="' + code +'" class="input-file">' +
		           		   '</div>' +
        			   '</div>';
			}
			if(type == "Image"){
				html = '<div class="clearfix">' +
		            	'<label for="fileInput">' + name + '</label>' +
	    				   '<div class="input">' +
	    						'<input type="file" accept="image/*" name="' +code + '" id="' + code +'" class="input-file">' +
		           		   '</div>' +
        			   '</div>';
			}
			if(type == "Date"){
				html = '<div class="clearfix">' +
		            	'<label for="date">' + name + '</label>' +
	    				   '<div class="input">' +
	    						'<input path="' + code + '" id="datepicker"></input>' +
		           		   '</div>' +
        			   '</div>';
			}
			return html;
		}

		function createEditor(code)
		{
			CKEDITOR.appendTo(code);
		}

		function addContent(urlContent){
			var sValid = true;
			sValid = sValid && checkValue(jQuery('#content #nameContent'));
			var dataContent = "";
			var nameContent = jQuery("#content #nameContent").val();
			if(sValid){
				jQuery.ajax({
					  type : "POST",
	    			  url: urlContent,
	    			  data: "name=" + nameContent + "&dataContent=" + dataContent,
	    			  context: document.body,
	    			  success: function(dataResponse){
	    				if(dataResponse == "200"){
	    					window.location.reload();
		    			}else{
		    				jQuery("#content #info").append(showAlert(nameContent))
				    	}
	    			  }
	    			});
			}
			return sValid;
		}

		function checkValue(obj){
			if ( obj.val().length > 0 ) {
					obj.parent().parent().removeClass("error");
					return true;
				} else {
					obj.parent().parent().addClass("error" );
					return false;
				}
		}
</script>
</body>
</html>
